<template>
  <div class="giftAdd">
    <!-- 礼物新增弹窗 -->
    <el-dialog
      :title="formData.id ? '编辑' : '新增'"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      width="40%"
      :show-close="true"
      :before-close="closeDailog"
    >
      <FormContainer :column="2">
        <el-form ref="form" :model="formData" :rules="formRules" label-width="80px">
          <el-form-item prop="giftCode" label="礼物编码">
            <el-input v-model="formData.giftCode" :disabled="formData.id ? true:false" clearable />
          </el-form-item>
          <el-form-item prop="giftName" label="礼物名称">
            <el-input v-model="formData.giftName" clearable />
          </el-form-item>
          <el-form-item prop="quantity" label="数量">
            <el-input v-model.number="formData.quantity" :disabled="formData.id ? true:false" clearable />
          </el-form-item>
          <el-form-item prop="seriesName" label="所属系列">
            <el-select v-model="formData.seriesName" placeholder="请选择" clearable filterable>
              <el-option
                v-for="(list, index) in seriesNameOp"
                :key="index"
                :label="list.dictName"
                :value="list.dictCode"
              />
            </el-select>
          </el-form-item>
          <el-form-item :span="24" prop="scope" label="使用范围">
            <el-select v-model="formData.scope" placeholder="请选择" clearable filterable multiple>
              <el-option
                v-for="(list, index) in scopeOp"
                :key="index"
                :label="list.dictName"
                :value="list.dictCode"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </FormContainer>
      <span slot="footer" class="dialog-footer">
        <Button @click="closeDailog">取消</Button>
        <Button type="primary" @click="confrim">确定</Button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import FormContainer from '@/components/FormContainer'
import Button from '@/components/Button'
import { getDictByType } from '@/api/dataDict'
import { giftAdd, giftEdit } from '@/api/careGift'
export default {
  name: 'GiftAdd',
  components: {
    FormContainer,
    Button
  },
  data() {
    return {
      dialogVisible: false,
      dialogVisible2: false,
      loading: false,
      seriesNameOp: [],
      scopeOp: [],
      formData: {
        id: '',
        giftCode: '', // 礼物编码
        giftName: '', // 礼物名称
        seriesName: '', // 系列
        scope: [], // 使用范围
        quantity: '' // 数量
      },
      quantityTotal: 0,
      curData: {},
      formRules: {
        giftCode: {
          required: true,
          message: '请输入礼物编码',
          trigger: 'change'
        },
        giftName: {
          required: true,
          message: '请输入礼物名称',
          trigger: 'change'
        },
        seriesName: {
          required: true,
          message: '请选择所属系列',
          trigger: 'change'
        },
        scope: {
          required: true,
          message: '请选择使用范围',
          trigger: 'change'
        },
        quantity: {
          required: true,
          message: '请输入礼品数量',
          trigger: 'change'
        }
      }
    }
  },
  created() {
    this.getDictInfo({ type: 'giftseries', dictTypeCode: 'GIFT_SERIES' }) // 所属系列
    this.getDictInfo({ type: 'scope', dictTypeCode: 'GIFT_USABLE_RANGE' }) // 使用范围
  },
  methods: {
    // 获取数据字典
    getDictInfo({ type, dictTypeCode }) {
      const params = {
        dictTypeCode: dictTypeCode,
        appCode: 'call-center',
        domainCode: 'marketing'
      }
      getDictByType(params).then(res => {
        const data = res.data || []
        if (type === 'giftseries') this.seriesNameOp = data
        if (type === 'scope') this.scopeOp = data
      })
    },
    // 打开弹窗
    openDailog(selected, type) {
      if (type === 'edit') {
        if (selected.length !== 1) {
          this.$message.warning('请选择一项需要编辑的礼品！')
          return
        }
        const data = selected[0]
        const dataObj = { ...data }
        if (!Array.isArray(dataObj.scope) && dataObj.scope) {
          dataObj.scope = dataObj.scope.split(',')
        }
        this.formData = dataObj
        this.quantityTotal = dataObj.quantity
      } else {
        this.formData = {
          giftCode: '',
          giftName: '',
          seriesName: '',
          scope: [],
          quantity: ''
        }
        this.quantityTotal = 0
      }
      this.dialogVisible = true
    },
    // 关闭窗口
    closeDailog() {
      this.$refs.form.resetFields()
      Object.keys(this.formData).forEach(k => {
        this.$set(this.formData, k, '')
      })
      this.dialogVisible = false
    },
    // 确定
    confrim() {
      return this.$refs.form.validate().then(() => {
        const params = { ...this.formData }
        params.scope = params.scope.join(',')
        params.quantity = Number(params.quantity)
        // 增加
        if (!params.id) {
          if (params.quantity < -1) {
            this.$message({
              message: '新增时数量必须大于0',
              type: 'warning'
            })
            return
          }
          return giftAdd([params]).then(response => {
            if (response.success === 1) {
              this.$message({
                message: '新增成功',
                type: 'success'
              })
              this.closeDailog()
              this.$emit('confrim')
              this.$refs.form.resetFields()
            }
          })
        }
        // // 修改
        if (params.id) {
          // if (params.quantity === 0) {
          //   this.$message({
          //     message: '入库更新数量不能为0',
          //     type: 'warning'
          //   })
          //   return
          // }
          return giftEdit(params).then(response => {
            if (response.success === 1) {
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              this.closeDailog()
              this.$emit('confrim')
              this.$refs.form.resetFields()
            }
          })
        }
      })
    }
  }
}
</script>
<style lang='scss' scoped>
.img_child {
  border: 1px solid #999;
  padding: 3px;
  border-radius: 2px;
  box-sizing: border-box;
  height: auto;
  width: 100%;
}
</style>
